import React, {Component} from "react"
import "../../../asset/css/mine/regist.css"
import { subMit } from "../../../action";
class Regist extends Component{
    constructor(){
        super()
        this.state={
            username:"",
            usernameTip:"",
            pwd1:"",
            pwd2:"",
            pwdTip:"",
            sex:"男",
            address:"南京",
            select:"",
            hobby:[],
            iphone:"",
            iphoneTip:"",
            check:"",
            isUser:false,
            isPas:false,
            isPhone:false,
            isSex:false,
            isAddress:false,
            isSelect:false,
            isHobby:false
            
        }
    }
    stopSubmit(e){
        e.preventDefault()
    }
    usernameChange(e){
        console.log(e.target)
        let val=e.target.value
        let tip=""
        let tru
        if(val.length>2){
            tip="正确"
            tru=true
        }else{
            tip="错误"
            tru=false
        }
        this.setState(state=>{
            state.username=val
            state.usernameTip=tip
            state.isUser=tru
            return state
        })
    }
    phoneChange(e){
        let val=e.target.value
        let tip=""
        let tru
        console.log(val)
        if(val.length>2){
            tip="正确";
            tru=true
        }else{
            tip="错误";
            tru=false
        }
        this.setState(state=>{
            state.iphone=val
            state.iphoneTip=tip
            state.isPhone=tru
            return state
        })
    }
    pwd1Change(e){
        let val=e.target.value
        let tip=""
        let tru
        if(val==""||this.state.pwd2==""){
            this.setState(state=>{
                state.pwdTip=""
                console.log(state.pwdTip)
                return state
            })
        }
        if(val===this.state.pwd2){
            tip="正确"
            tru=true
        }else{
            tip="错误"
            tru=false
        }
        this.setState(state=>{
            state.pwd1=val;
            state.pwdTip=tip
            state.isPas=tru
            return state
        })
    }
    pwd2Change(e){
        console.log(e.target)
        let val=e.target.value
        let tip=""
        let tru
        if(val===this.state.pwd1){
            tip="正确"
            tru=true
        }else{
            tip="错误"
            tru=false
        }
        this.setState(state=>{
            state.pwd2=val
            state.pwdTip=tip
            state.isPas=tru
            return state
        })
    }
    sex_Change(e){
        let val=e.target.value
        let tip=""
        if(val===this.state.pwd1){
            tip="正确"
        }else{
            tip="错误"
        }
        this.setState(state=>{
            state.pwd2=val
            state.isSex=tip
            return state
        })
    }
    sex_Change(e){
        let val=e.target.value
        this.setState(state=>{
            state.sex=val
            return state
        })
    }
    select_change(e){
        let val=e.target.value
        this.setState(state=>{
            state.select=val
            return state
        })
    }
    hobbyChange(e){
       
        let val=e.target.value
        let checked=e.target.checked
        console.log(val,checked)
        let tru
        if(checked){
            tru=true
            this.setState(state=>{
                state.hobby.push(val)
                state.isForm=tru
                return state
            })
        }else{
            tru=true
            let ind=this.state.hobby.indexOf(val)
            this.setState(state=>{
                state.hobby.splice(ind,1)
                state.isForm=tru
                return state
            })
        }
    }
    Checkeall(e){
        let checked=e.target.checked
        let tru
        if(checked){
            tru=true
        }else{
            tru=false
        }
        this.setState(state=>{
            state.check=checked
            state.isForm=tru
            return state
        })
    }
    subMit(){
        
        if(this.state.check&&this.state.isUser&&this.state.isPhone){
         
                this.$axios.post("http://localhost:3006/user",{
                    username:this.state.username,
                    password:this.state.pwd1,
                    sex:this.state.sex,
                    select:this.state.select,
                    hobby:this.state.hobby,
                    iphone:this.state.iphone,
                })

             alert("注册成功")

             let {changeType}=this.props
             changeType(2,this.state.username,this.state.pwd2)
           
            }else{
                alert("注册失败")
            }


    }
    render(){
       let {username,pwd2}=this.state
       let address=["北京","上海","南京","天津","东京"]
      address= address.map((item,index)=><option key={index} value={item} style={{"textAlign":"center"}}>{item}</option>)
        return(
            <div className="registContainer">
               <div className="re_top">
               <form className="form_regist" onSubmit={this.stopSubmit}>
                <div className="regist_username">
                    <label>用户名</label>
                    <input type="text" ref="regist_username"  onChange={e=>{this.usernameChange(e)}}/>
                   <label className={this.state.usernameTip=="正确"?"regist_tipTrue":"regist_tipFalse"}> {this.state.usernameTip}</label>
                </div>
                <div className="regist_password">
                    <label>密&nbsp;&nbsp;&nbsp;码</label>
                    <input type="text" ref="regist_password"  onChange={e=>{this.pwd1Change(e)}} />
                </div>
                <div className="con_password">
                    <label>确认密码</label>
                    <input type="text" ref="con_password"  onChange={e=>{this.pwd2Change(e)}}/>
                    <label className={this.state.pwdTip=="正确"?"regist_tipTrue":"regist_tipFalse"}> {this.state.pwdTip}</label>
                </div>
                <div className="xingbie">
                <label>性&nbsp;&nbsp;&nbsp;别</label>
                    <input type="radio" name="sex" value="男" defaultChecked={this.state.sex==="男"} ref="xingbie" onChange={e=>{this.sex_Change(e)}} />
                    &nbsp;&nbsp;<label>男</label>
                    <input type="radio" name="sex" value="女" defaultChecked={this.state.sex==="女"} ref="xingbie" onChange={e=>{this.sex_Change(e)}}/>
                    &nbsp;&nbsp; <label>女</label>
                    {/* {this.state.sex} */}
                </div>
                <div className="regist_iphone">
                    <label>手机号码</label>
                    <input type="text" name="phone" id="phone" onChange={e=>{this.phoneChange(e)}} />
                    <label className={this.state.iphoneTip=="正确"?"regist_tipTrue":"regist_tipFalse"}> {this.state.iphoneTip}</label>
                </div>
                <div className="regist_hobby">
                <label>爱&nbsp;&nbsp;&nbsp;好</label>
                         <input type="checkbox" name="fav" id="" value="唱歌" onChange={e=>{this.hobbyChange(e)}} />&nbsp;唱歌
                        <input type="checkbox" name="fav" id="" value="跳舞" onChange={e=>{this.hobbyChange(e)}} />&nbsp;跳舞
                        <input type="checkbox" name="fav" id="" value="打豆豆" onChange={e=>{this.hobbyChange(e)}} />&nbsp;打豆豆
                   {/* {this.state.hobby.join(",")} */}
                </div>
                <div className="regist_address" >
                <label>籍&nbsp;&nbsp;&nbsp;贯</label>
                <select name="address" defaultValue={this.state.address} onChange={e=>{this.select_change(e)}}>
                         {address}
                        </select>
                        {/* {this.state.select} */}
                </div>        
                <div className="xieyi">
                
                <input type="checkbox" onChange={e=>{this.Checkeall(e)}} />是否同意本公司协议？
                </div>
                <div className="regist_submit" onClick={this.subMit.bind(this)}>
                      注册
                <button className="regist_btn">注册</button>
                </div>
                </form> 
               </div>
            </div>
        )
    }
}
export default Regist